<template>
  <div class="container">
    <!-- <button @click="fun()">qwerq</button> -->
    <h2>日报</h2>
    <div id="main" style="width: 500px; height: 500px; float: left"></div>
    <div id="main1" style="width: 500px; height: 500px; float: left"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option1: {
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
          },
        ],
      },
      option: {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["1", "2", "3", "4", "5", "6", "7"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220],
          },
        ],
      },
    };
  },

  methods: {
    fun() {
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("main"));
      myChart.setOption(this.option);
    },
    fun1() {
      var echarts1 = require("echarts");
      var myChart1 = echarts1.init(document.getElementById("main1"));
      myChart1.setOption(this.option1);
    },
  },
  props: {
    mad: [],
  },
  mounted() {
    this.fun();
    this.fun1();
  },
  components: {},
};
</script>

<style scoped>
</style>
